import React, { useState } from 'react'
import { NavBar,Cell } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import './login.css'
import {
  Form,
  Input,
  Button,
  Popup
} from 'antd-mobile'
import { LogiN } from '../../axios/index.js'
import { useDispatch } from 'react-redux'
import { saveUserId } from '../../store/userSlice.js'
export default function Login(props) {
  const [visible2, setVisible2] = useState(false)
  let [message,setMessage] = useState('')
  let navigate = useNavigate()
  let dispath = useDispatch()
  const submit = (values) => {
    // console.log(values);
    LogiN(values).then(res => {
      // console.log(res);
      if(res.data.code === '200'){
          localStorage.setItem('token',res.data.data.token)
          dispath(saveUserId(res.data.data.userid))
          
          setVisible2(true)
          setMessage(res.data.message)
          setTimeout(()=>{
            setVisible2(false)
            navigate('/home')
          },1000)
      }
    })
  }
  return (
    <div className='login-box'>
      <Popup
          mask={false}
          visible={visible2}
          onMaskClick={() => {
            setVisible2(false)
          }}
          onClose={() => {
            setVisible2(false)
          }}
          position='top'
          bodyStyle={{ textAlign:'center',
          height: '9vh',backgroundColor:'withe',color:'pink',
          lineHeight:'9vh',
          fontSize:'16px'
         }}
          
        >
          {message}
        </Popup>
        <NavBar
          title="登录"
          leftText="返回"
          onClickLeft={() => navigate(-1)}
        />

        <Form
        requiredMarkStyle='none'
        layout='horizontal'
        onFinish={submit}
        footer={
          <Button className='login-but' block type='submit' size='large'>
            提交
          </Button>
        }
        className='login-from'
      >
        <Form.Item name='loginname' label='手机号' rules={[{ required: true }]}>
          <Input placeholder='请输入手机号' />
        </Form.Item>
        <Form.Item name='password' label='密码' rules={[{ required: true }]}>
          <Input type='password' placeholder='请输入手密码' />
        </Form.Item>
      </Form>

      <div className='reg-box'>
        <p>去注册</p>
        <Cell className='reg-button' title='快速注册' isLink onClick={() => navigate('/register/step1')} />
      </div>
    </div>
  )
}
